【翻译】使用SVG

发表于 | 更新于 | 阅读次数：

原文地址：css-tricks.com

SVG 是一种矢量图片格式。字面意为可伸缩矢量图形（Scalable Vector Graphics）。也就是你通过 Adobe Illustrator 做出来的东西。在网页中可以很简单地使用 SVG，但是有些东西是你应该了解的。

为什么要使用 SVG？

  1. 压缩量好，文件小
  2. 高保真伸缩到任意尺寸（除了尺寸很小的情况下会失真）
  3. 适合视网膜屏（retina）显示
  4. Design control like interactivity and filters

###Getting some SVG to work with
下图是在 Adobe Illustrator 中设计的一只鹬鸵站在一个椭圆上。
kiwi.png
Notice the artboard is cropped up right agains the edges of the design. Canvas matters in SVG just like it would in PNG or JPG.

在 Adobe Illusatrator 可以将图形直接保存为 SVG 文件。
save-as-svg.png
保存时，你会看到另一个关于 SVG 选项的对话框。关于这个对话框，我了解的不多。这里有一个SVG 说明书。SVG1.1 可以正常工作。
svg-options.png
最有趣的是你可以按下 OK 保存文件，也可以按下“SVG Code…”通过 TextEdit（在 Mac 上）打开 SVG 代码。
svg-code.png

当做 img 使用 SVG

如果刚才我将 SVG 保存到一个文件中，那么我现在可以将它用在一个 img 标签中。

1
<img src="kiwi.svg" alt="Kiwi standing on oval" />

在 Illustrator 中，绘图板大小是 612x502px。
artboard.png
以下是该图片在网页中显示尺寸。你可以选择 img 节点并修改其 width 或者 height 来改变其大小，就跟 PNG 或 JPG 图片一样。这儿有一个例子。
kiwi.svg

浏览器支持情况

这样使用 SVG 要注意它的浏览器支持情况总体来讲，除了 IE8 及以下，Android2.3 及以下都支持的很好。

如果你想使用 SVG，但是又要支持这些不支持 SVG 的浏览器，你有一些选择，在包含了一些我使用过的一些技术。

一个方法是通过 Modernizr 测试是否支持冰替换 img 的 src 属性。

1
2
3
if (!Modernizr.svg) {
    $('.logo img').attr('src', 'images/logo.png');
}

David Bushell 提出了一个更简单的方法。如果可以在标签中使用 javascript。

1
<img src="image.svg" onerror="this.onerror=null; this.src='image.png'" />

SVGeezy也很有用，在以下文章中我们会讲到更多的 fallback 技术。

作为 background-image 使用 SVG

跟将 SVG 作为 img 使用一样简单，也可以将它作为 backgorund-image。

1
<a href="/" class="logo"> Kiwi Corp </a>
1
2
3
4
5
6
7
8
.logo {
    display: block;
    text-indent: -9999px;
    width: 100px;
    height: 82px;
    background: url(kiwi.svg);
    background-size: 100px 82px;
}

[未完]